<template>
	<view>
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回" @clickRight="backWork" right-icon="home"
			:title=this.titleName @clickLeft="back" />

		<uni-table ref="table" border stripe>
			<uni-tr class="firstTable">
				<uni-th class="firstTh" width="80" align="center">商品</uni-th>
				<uni-th width="60" align="center">净售量</uni-th>
				<!-- <uni-th width="40" align="center">赠品量</uni-th> -->
				<uni-th width="100" align="center">净售额</uni-th>
				<uni-th width="80" align="center">净成本</uni-th>
				<uni-th width="80" align="center">商品利润</uni-th>
				<uni-th width="100" align="center">详情</uni-th>
				
			</uni-tr>
			<uni-tr v-for="(item, index) in tableData" :key="index">
				<uni-td class="firstTd" align="center" :class="item.chainId == null?'self':'other'">{{ item.commodity }}</uni-td>
				<uni-td align="center" :class="item.chainId == null?'self':'other'">{{ item.netSalesVolume }}</uni-td>
				<!-- <uni-td align="center">{{ item.giftQuantity }}</uni-td> -->
				<uni-td align="center" :class="item.chainId == null?'self':'other'">{{ item.netSalesAmount }}</uni-td>
				<uni-td align="center" :class="item.chainId == null?'self':'other'">{{ item.netCost }}</uni-td>
				<uni-td align="center" :class="item.chainId == null?'self':'other'">{{item.profit}}</uni-td>
				<uni-td align="center" >
					<button v-show="(item.exist)" type="primary" size="mini" @click="toggleImg('center',item.barcode)">图片</button>
					<!-- <button v-show="true" type="primary" size="mini" @click="toggleImg('center',item.barcode)">图片</button> -->
					<button   type="primary" size="mini" @click="toggle('center',item.barcode)">详情</button>
				</uni-td>
			</uni-tr>
		</uni-table>
		
		
		<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff"  @touchmove.prevent :round="30" mode="bottom" >
				<scroll-view :scroll-top="scrollTop" scroll-y="true"  @touchmove.stop @scroll="scroll">
				  <view class="popup-content" >
				  	<text style="padding-left: 40px;border-bottom: 30px; font-weight: 550;">
				  		货品库存跟踪:{{barcode}}
				  	</text>
				  	<uni-table  border stripe  style="position: relative; top: 10px;">
				  		<uni-tr>
				  			<uni-th width="100" align="center">发生日期</uni-th>
				  			<uni-th width="90" align="center">描述</uni-th>	
				  			<uni-th width="50" align="center">数量</uni-th>
							<uni-th width="150" align="center">店铺名称</uni-th>
				  			<uni-th width="50" align="center">编码</uni-th>
				  			<uni-th width="80" align="center">单据号</uni-th>
				  		</uni-tr>
				  		<uni-tr v-for="(item, index) in details" :key="index">
				  			<uni-td align="center" :class="item.chainId == null?'self':'other'">{{ item.createTime }}</uni-td>
				  			<uni-td align="center" :class="item.chainId == null?'self':'other'">{{ item.describe }}</uni-td>
				  			<uni-td align="center" :class="item.chainId == null?'self':'other'">{{ item.number }}</uni-td>
							<uni-td align="center" :class="item.chainId == null?'self':'other'">{{ item.chainName }}</uni-td>
				  			<uni-td align="center" :class="item.chainId == null?'self':'other'">{{ item.code }}</uni-td>
				  			<uni-td align="center" :class="item.chainId == null?'self':'other'">{{item.documentCode}}</uni-td>
				  		</uni-tr>
				  	</uni-table>
				  </view>
				</scroll-view>
			</uni-popup>
			<!-- 普通弹窗 -->
				<uni-popup ref="popupImg" background-color="#fff"  @touchmove.prevent :round="30" mode="bottom" >
					<scroll-view :scroll-top="scrollTop" scroll-y="true"  @touchmove.stop @scroll="scroll">
					  <view class="popup-content" >
						  <text style="font-weight: 550; position: relative; left: 6%;">商品条码:{{this.barcode}}</text>
					  	 <image :src="imgFilePath" style="top: 5%;left: 5%;"></image>
					  </view>
					</scroll-view>
				</uni-popup>
		
	</view>
</template>

<script>
	import {baseUrl} from 'libs/util/global'
	export default {
		data() {
			return {
				
				//滚动条
				scrollTop: 0,
				old: {
				    scrollTop: 0
				   }, 
				barcode: '',
				year: '',
				quarter: '',
				chainStore: '',
				handledBy: '',
				brandId: '',
				startTime: '',
				endTime: '',
				authority: null,
				loginUserId: null,
				loginUserType: null,
				titleName: '',
				titleYear: '',
				titleQuarter: '',
				titleBrandName: '',
				chainStoreName: null,
				tableData: [],
				details:[],
				isExist: 'true',
				imgFilePath: ''
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log("========品牌页面=====")
			this.chainStoreName = option.chainStoreName
			this.titleYear = option.titleYear
			console.log(option.titleYear)
			this.titleQuarter = option.titleQuarter
			console.log(option.titleQuarter)
			this.titleBrandName = option.brandName
			console.log(option.brandName)
			console.log(option.year); //打印出上个页面传递的参数。
			this.year = option.year
			console.log(option.quanter); //打印出上个页面传递的参数。
			this.quarter = option.quanter
			console.log(option.chainStore); //打印出上个页面传递的参数。
			this.chainStore = option.chainStore
			console.log(option.handledBy) //经手人信息
			this.handledBy = option.handledBy
			console.log("品牌id"+ option.brandId) // 品牌id
			this.brandId = option.brandId
			console.log(option.startTime)
			this.startTime = option.startTime
			console.log(option.endTime)
			this.endTime = option.endTime
			uni.getStorage({
				key: 'userId',
				success:(res)=> {
					// console.log(res.data + "登录用户id:"+res.data)
					this.loginUserId = res.data
				}
			});
			uni.getStorage({
				key: 'isChain',
				success:(res) =>{
					// console.log(res.data + "登录用户类型:"+res.data)
					this.loginUserType = res.data
				}
			});
			uni.getStorage({
				key: 'authority',
				success:(res) =>{
					// console.log(res.data + "登录用户权限:"+res.data)
					this.authority  = res.data
				}
			});
		},
		mounted() {
			this.getInfo(),
			this.initTitleName(),
			this.initTitleName()
			
		},
		methods: {
			//滚动条
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			//查看详情
			toggle(type,barcode) {
				uni.showLoading({
				title: '加载中.....'
				})
				console.log("条码:"+barcode)
				this.barcode = barcode
							this.type = type
							// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
							this.$refs.popup.open(type)
							uni.request({
								url: baseUrl+'/sales/details',
								header: {
									'content-type': 'application/json'
								},
								method: 'POST',
								data: {
									userId: this.loginUserId,
									userType: this.loginUserType,
									storeId: this.chainStore,
									barcode: barcode,
								},
								success: (res) => {
									console.log(res)
									setTimeout(function() {
										uni.hideLoading();
									}, 100);
									this.details = res.data.data									
								}
							})
						},
			toggleImg(type,barcode){
				this.barcode = barcode
				this.$refs.popupImg.open(type)
				uni.request({
					url: baseUrl+'/getImg/'+barcode,
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					method: 'GET',
					data: {
					},
					success: (res) => {
						console.log(res)	
						if(res.data.msg != null){
							this.imgFilePath = res.data.msg
						}else{
							this.imgFilePath = "/static/absent.jpg"
						}							
					}
				})
			},	
					

						
			//初始化页面标题
			initTitleName(){
				if(this.chainStore ===""){
					this.titleName = this.titleYear + this.titleQuarter + this.titleBrandName
				}else{	
					if(this.titleBrandName.startsWith("千禧宝贝")){
						this.titleName = this.chainStoreName.substring(0,6) + this.titleYear + this.titleQuarter + " " + this.titleBrandName.substring(4,this.titleBrandName.length)
					}else{
						this.titleName = this.chainStoreName.substring(0,6) + this.titleYear + this.titleQuarter + " " + this.titleBrandName.substring(0,3)
					}
					
				}
			},
			
			// 左上角返回按钮
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			backWork(){
				uni.switchTab({
					url: '/pages/work/work'
					})
			},
			// 获取商品信息
			getInfo() {
				uni.showLoading({
						title: "加载中...."
					}),
				uni.request({
					url: baseUrl+'/sales/product',
					header: {
						'content-type': 'application/json'
					},
					method: 'POST',
					data: {
						userId: this.loginUserId,
						userType: this.loginUserType,
						chainStore: this.chainStore,
						handledBy: this.handledBy,
						yearId: this.year,
						quarterId: this.quarter,
						brandId: this.brandId,
						startTime: this.startTime,
						endTime: this.endTime
					},
					success: (res) => {
						if (res.data.code == 200) {
							setTimeout(function() {
									uni.hideLoading();
								}, 200)
								if(this.authority == 2){
									
									for (var i = 0; i < res.data.data.length; i++) {
										res.data.data[i].netCost = '0.00'
										res.data.data[i].profit = '0.00'
									}
									
									this.tableData = res.data.data
								}else{
									this.tableData = res.data.data
								}
							this.tableData = res.data.data
						} else {

						}
					}
				})
			}
		}
	}
</script>

<style>
	.self{
		color: black;
	}
	.other{
		color: blue;
	}
	.popup-content {
			/* @include flex; */
			align-items: center;
			justify-content: center;
			padding: 15px;
			height: 500rpx;
			width: 650rpx;
			border-radius: 10%;
			background-color: #fff;
		}
	//冻结表头第一列
	.firstTh {
		position: sticky;
		left: 0;
		top: 0;
		background-color: #fff;
		z-index: 0;
	}

/* 	/deep/ .uni-table-tr {
		overflow: visible;
		background-color: #fff;
	} */

	/deep/ .firstTd {
		position: sticky;
		left: 0;
		top: 0;
		background-color: lavenderblush;
		z-index: 0;
	}
</style>